<template>
  <div>
    <div class="play-container" id="rtcpusher"  :style="{left: callingPosition.x + 'px', top: callingPosition.y + 'px', width: callingPosition.width + 'px', height: callingPosition.height + 'px'}">
      <live-player
        :id="'yunxinplayer-' + uid"
         :style="{height: callingPosition.height + 'px', position: 'absolute', width: '100%', top: 0, left: 0}"
        :src="url"
        mode="live"
        class="player"
        :orientation="orientation"
        min-cache="0.1"
        max-cache="0.3"
        @statechange="stateChangeHandler"
        :object-fit="objectFit"
        :autoplay='true'
        :sound-mode='soundMode'
        auto-pause-if-navigate="false"
        auto-pause-if-open-native="false"
        :debug="debug">
        <!-- <cover-view
          v-if="status !== 'ready'"
          class="sud flex-center-column"
          style="display:flex;position: absolute; width: 100%; height: 100%;justify-content:center;align-items:center;">
          <cover-image style="width: 182rpx;height:240rpx" :src="'/static/images/'+ status + '.png'"></cover-image>
        </cover-view> -->
        <!-- <cover-view style="position: absolute;top:10px;left:10px;font-size: 28rpx; right: 10px;color:#ccc;" v-if="coverText.length != 0">
          {{coverText}}
        </cover-view> -->
      </live-player>
    </div>
  </div>
 </template>
<script>
  import Bus from '@/utils/bus.js'
  const app = getApp()
	export default {
		data () {
			return {
				callingPosition: {
          x: 0,
          y: 0,
          width: 0,
          height: 0
        },
        debug: false,
        status: 'loading',
        orientation: 'vertical',
        objectFit: 'fillCrop',
        name: '',
        coverText: '',
        livePlayerContext: null,
        detached: false,
        soundMode: 'ear'
			}
		},
    props: {
      uid: '',
      url: '',
      config: {}
    },
		mounted () {
      this.callingPosition = {
        x: 0,
        y: 0,
        width: app.globalData.videoContainerSize.width,
        height: app.globalData.videoContainerSize.height + 50
      }
      console.log(`yunxinplayer-${this.uid} ready,url-${this.url}`)
      if (!this.livePlayerContext) {
        this.livePlayerContext = mpvue.createLivePlayerContext(`yunxinplayer-${this.uid}`, this)
      }
      if (this.url) {
        this.start()
        this.detached = false
      }
      Bus.$on('changeSound', (res) => {
        console.log(res, '$on')
        this.soundMode = res
      })
		},
    lifetimes: {
      /**
       * 在组件实例被从页面节点树移除时执行
       */
      detached() {
        console.log(`yunxinplayer-${this.uid} detached`)
        mpvue.createLivePlayerContext(`yunxinplayer-${this.uid}`, this).stop()
        this.detached = true
      },
    },
		methods: {
      clone () {
        console.log('llll')
      },
      /**
       * 播放器状态更新回调
       */
      stateChangeHandler(e) {
        console.log(e.mp.detail.code, '播放器状态更新回调回调')
        console.warn(`yunxin-player code: ${e.mp.detail.code} - ${e.mp.detail.message}`)
        let uid = parseInt(e.mp.target.id.split('-')[1])
        if (e.mp.detail.code === 2004) {
          console.log(`live-player ${uid} started playing`)
          if (this.status === 'loading') {
            this.status = 'ready'
          }
        } else if (e.mp.detail.code === -2301) {
          console.log(`live-player ${uid} stopped`, 'error')
          this.status = 'error'
          this.triggerEvent('pullfailed')
        }
      },
		  /**
		   * 开始拉流播放
		   */
		  start() {
		    const uid = this.uid
		    if (this.status === 'ready') {
		      console.log(`player ${uid} already started`)
		      return
		    }
		    if (this.detached) {
		      console.log(`try to start player while component already detached`)
		      return
		    }
		    console.log(`starting player ${uid}`)
		    this.livePlayerContext.play()
        if (uid) {
          this.status === 'ready'
        }
		  },
		  /**
		   * 停止拉流播放
		   */
		  stop() {
		    console.log(`stopping player ${this.uid}`)
		    mpvue.createLivePlayerContext(`yunxinplayer-${this.uid}`, this).stop()
		  },
		  /**
		   * 切换画面方向
		   * true为 horizontal，false为 vertical
		   */
		  changeOrientation(isHorizontal) {
		    let orientation = isHorizontal ? 'horizontal' : 'vertical'
        this.orientation = orientation
		  },
		  /**
		   * 切换填充模式
		   * true为 fillCrop，false为 contain
		   */
		  changeObjectFit(isFillCrop) {
		    let objectFit = isFillCrop ? 'fillCrop' : 'contain'
		    this.objectFit = objectFit
		  },
		  /**
		   * 改变画面蒙面
		   */
		  changeStatus(status) {
		    switch(status) {
		      case 'leave':
		      case 'notConnected': {
		        break
		      }
		      default: {
		        status = this.status
		      }
		    }
		    // console.error(status)
		    this.status = status
		  },
		  /**
		   * 开启调试
		   */
		  toggleDebug(isDebug) {
		    this.debug = isDebug
		  }
		}
	}
</script>
<style scoped lang='less'>
  .play-container{
    background: black;
    display: block;
    position: absolute;
  }
  .player {
    /* background-color: transparent!important */
  }
  .control-wrapper {
    z-index: 9999!important;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
  }
  .calling-voerview {
    background-color:#ccc;
    color:#fff;
    height: 160rpx;
    font-size: 40rpx;
    text-align: center;
    line-height: 160rpx;
  }
  .control-wrapper {
    position: fixed;
    bottom: 18px;
    left:0;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction:row;
    justify-content: space-between;
    padding: 0 42rpx;
    height: 200rpx;
  }
  .control-wrapper .item{
    width: 92rpx;
    height: 92rpx;
    margin-top: 100rpx;
  }
  .netcall-time-text {
    position:absolute;
    bottom:160rpx;
    width:100%;
    height: 40rpx;
    color:#fff;
    font-size:40rpx;
    text-align:center;
    left:0;
  }
</style>
